<template>
  <z-modal
    :title="title"
    destroyOnClose
    :width="800"
    :visible="visible"
    :fullscreen.sync="fullscreen"
    :switchFullscreen="switchFullscreen"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <a-row>
          <a-col :span="24" >
            <a-form-model-item label="父部门" >
              <a-tree-select
                v-model="form.faDeptId"
                class="w-full"
                :disabled="disableSubmit"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :tree-data="deptTree"
                placeholder="请选择"
                :getPopupContainer="(node) => node.parentNode"
                :replaceFields="replaceFields"
                allowClear
              >
              </a-tree-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item label="部门编码" prop="deptCode">
              <a-input placeholder="请输入部门编码" :disabled="editType !== 'add' || disableSubmit" v-model.trim="form.deptCode"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item label="部门名称" prop="deptName">
              <a-input placeholder="请输入部门名称" :disabled="disableSubmit" v-model.trim="form.deptName"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item label="部门类型" prop="deptType">
              <z-dict-select-tag v-model="form.deptType" :disabled="disableSubmit" dictCode="MB_SYSTEM_DEPT_TYPE"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item  label="描述">
              <a-input :disabled="disableSubmit" type="textarea" v-model="form.deptDesc"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </z-modal>
</template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import { TreeSelect as ATreeSelect } from 'ant-design-vue'
import debounce from 'lodash/debounce'
import { duplicateCheck } from '@/services/common'
export default {
  name: 'DeptModal',
  mixins: [ModalFormMixin],
  components: {
    ZDictSelectTag,
    ATreeSelect
  },
  props: {
    deptTree: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      validatorRules: {
        deptCode: [
          { required: true, message: '请输入部门编码!', trigger: 'change' },
          { validator: (rule, value, callback) => this.validateDuplicate(rule, value, callback), trigger: 'change' }
        ],
        deptName: [{ required: true, message: '请输入部门名称!' }],
        deptType: [{ required: true, message: '请输入部门类型!' }]
      },
      url: {
        add: '/dept/add',
        edit: '/dept/edit',
        list: '/dept/tree'
      },
      replaceFields: {
        children: 'children',
        title: 'deptName',
        key: 'id',
        value: 'id'
      }
    }
  },
  methods: {
    addAfter({ id }) {
      if (id) {
        this.form.faDeptId = id
      }
      // this.menuOptions = dataSource
    },
    classifyIntoFormData() {
      return [
        { ...this.form }
      ]
    },
    validateDuplicate: debounce(function(rule, value, callback) {
      if (!value || this.editType === 'edit') {
        callback()
      } else {
        duplicateCheck({
          tableName: 'mb_dept',
          column: 'dept_code_',
          key: value,
          exclude: this.editType === 'edit' ? value : undefined
        }).then(res => {
          if (res.success) {
            res.result === 0 ? callback() : callback('编码已存在')
          } else {
            this.$message.warning(res.message)
          }
        })
      }
    }, 400)
  }
}
</script>

